<template>
  <div class="history">
    <TipsView :icon="Tipsicon" :text="Tipstext" ref="childTips"></TipsView>
    <!-- <Consider @change="change"  text="确定不再关注此人？" ></Consider> -->
    <div class="history-header">
      <div class="left">
        <span>
          <p :class="titleState?  'active-p' :''" @click.stop="checkTitle(0)">按倒序</p>
        </span>
        <span>
          <p :class="titleState?  '' :'active-p'" @click.stop="checkTitle(1)" > 按正序</p>
        </span>
      </div>
      <div class="right">
        <div class="serach">
          <form>
            <div class="input-info">
              <input placeholder="搜索关键词" v-model="keyText" @blur="handerSerach" />
              <span title="搜索" ><i class="iconfont icon-31sousuo"></i> </span>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="myfollow-user">
       <div class="myfollow-useritems" v-for="(item,index) in followList" :key="item.uid">
          <div  class="myfollow-userurl">
            <div class="myfollow-userimg" @click="goUserHome(item.uid)">
              <img :src="item.avatar" :alt="item.username" />
            </div>
            <div class="myfollow-userinfo">
              <div class="userinfo-one" @click="goUserHome(item.uid)">
                {{item.username}}
              </div>
              <div class="userinfo-three">{{item.lable}} </div>
              <div class="userinfo-two">
                <p v-if="item.introduce===''">暂无简介</p>
                <p v-else>{{item.introduce}}</p>
              </div>

            </div>
          </div>
          <div class="myfollow-button" @click.stop='showItemMore(item.uid,index)' >
            <div class="other"><i class="iconfont icon-qita"></i></div>
            <div class="other-more" v-if="item.itemMore">
                <div class="info-box">
                <div class="close">
                  <i
                    class="iconfont icon-guanbi"
                    title="关闭"
                    @click.stop="item.itemMore=false"
                  ></i>
                </div>
                <div class="more-list">
                  <div class="more-item" v-if="followState.fllow_mutual" @click="removeFollow(item.uid,index)">互相关注</div>
                  <div class="more-item" v-if="followState.fllow_me" @click="removeFollow(item.uid,index)">取消关注</div>
                  <div class="more-item">设置分组</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box">
          <Loading noMoreText='没有更多内容了~去其他页面看看吧' :loadShow="loadShow" :noMoreShow="noMoreShow" :loading="loading"></Loading>
        </div>
    </div>
  </div>
</template>

<script>
import http from '@/util/http'
import scroll from '@/util/scroll'
import { mapState, mapMutations } from 'vuex'
import TipsView from '@/components/utilView/tipView.vue'
import Loading from '@/components/utilView/loadingView.vue'
export default {
  components: {

    TipsView,
    Loading
  },
  data () {
    return {
      titleState: true, // 排序状态
      followList: [], // 关注列表
      page: 1, // 关注列表的页码
      Tipsicon: 'icon-duigoux', // 提示的图标
      Tipstext: '', // 提示的文字信息
      cruntIndex: null, // 取消关注的用户的下标
      nid: 0, // 取消关注的用户的id
      followState: {}, // 关注的状态
      keyText: '', // 搜索内容
      sortState: 0, // 排序状态
      noMore: false, // 判断数据是否还有
      isRequest: false, // 网路请求控制
      loadShow: false, // 显示loading页面
      noMoreShow: false, // 没有更多数据提示
      loading: false // 加载中提示
    }
  },
  mounted () {
    window.addEventListener('scroll', this.windowScroll, true) // 监听页面滚动
    // 请求我的关注列表数据
    http.userfollow(this.user.uid, this.page, 0, this.keyText).then(res => {
      console.log(res.data)
      this.followList = res.data.data
      if (res.data.data.length < 10) {
        this.noMore = true
        // 显示没有更多数据
        this.loadShow = true
        this.noMoreShow = true
      }
      this.page++ // 页码自增
    })
  },
  computed: {
    ...mapState(['user', 'followOneState']),
    // 检测是否取消关注成功的状态，以进行操作
    followOne () {
      return this.followOneState
    }
  },
  watch: {
    // 取消关注之后，变量会改变，改变之后触发方法
    followOne () {
      this.removeFollowBefore()
    }
  },
  methods: {
    // 实现无限加载更多数据
    // 回调函数
    windowScroll () {
      // 获取三个值

      const scrollTop = scroll.getScrollTop()
      const clientHeight = scroll.getClientHeight()
      const scrollHeight = scroll.getScrollHeight()
      // 距离底部10px时触发
      if (scrollTop + clientHeight + 10 > scrollHeight) {
        // 发送异步请求请求数据，同时携带offset并自增offset
        // noMore是自定义变量，如果是最后一批数据则以后都不加载
        if (!this.isRequest) {
          if (!this.noMore) {
            // isRequest限制请求的次数 上一次请求返回之前不会进行下一次请求 ，阻止发送多次请求
            this.isRequest = true
            // 显示加载中
            this.loadShow = true
            this.loading = true
            http.userfollow(this.user.uid, this.page, 0, this.keyText).then((res) => {
              this.followList = this.followList.concat(res.data.data)
              console.log(this.followList)
              // 隐藏加载更多提示
              this.loadShow = false
              this.loading = false
              this.isRequest = false
              // 判断是否还有足够数据
              if (res.data.data.length < 10) {
                this.noMore = true
                // 显示没有更多数据
                this.loadShow = true
                this.noMoreShow = true
              }
              // 增加一页
              this.page++
            })
          }
        }
      }
    },
    ...mapMutations(['meshowConsider', 'handerConsiderData']),
    // 切换头部
    // // 提示信息 方法
    tipsMethod (text) {
      // text是提示消息文字
      this.$refs.childTips.HanderTiming(1000) // 显示提示框方法 可以传递需要显示的事件参数  显示1秒
      this.Tipstext = text // 传递提示消息
    },
    checkTitle (state) {
      // 切换头部
      // 重置页码
      this.page = 1
      // 赋值状态
      this.sortState = state
      if (state === 0) {
        // 倒序
        // 状态切换
        this.titleState = true
        http.userfollow(this.user.uid, this.page, 0, this.keyText).then(res => {
          console.log(res.data)
          this.followList = res.data.data
        })
      } else if (state === 1) {
        // 正序
        // 状态切换
        this.titleState = false
        http.userfollow(this.user.uid, this.page, 1, this.keyText).then(res => {
          console.log(res.data)
          this.followList = res.data.data
        })
      }
    },
    // 取消关注的逻辑
    removeFollow (id, index) {
      // 显示弹出框
      this.meshowConsider(true)
      this.handerConsiderData({ text: '确定不再关注此人？', type: 'removeFollowOne', uid: this.user.uid, nid: id })
      // console.log(id, index)
      // 保存了当前点击取消关注的用户项的下标
      this.cruntIndex = index
      // 保存当前点击取消的用户的id
      this.nid = id

      this.followList[index].itemMore = false
    },
    // 取消关注成功之后
    removeFollowBefore () {
      this.followList.splice(this.cruntIndex, 1)
    },

    // 显示与单个粉丝关注的状态
    showItemMore (id, index) {
      // id列表当前选中的用户id

      http.userfollowState(this.user.uid, id).then(res => {
        console.log(res.data)
        this.followState = res.data.data
        console.log(res.data.data, '显示状态')
        this.followList[index].itemMore = true
      })
    },
    // 搜索
    handerSerach () {
      // 页码返回第一页
      console.log('失去')
      this.page = 1
      http.userfollow(this.user.uid, this.page, this.sortState, this.keyText).then(res => {
        console.log(res.data)
        this.followList = res.data.data
        this.page++ // 页码自增
      })
    },
    // 跳转到其他用户的个人主页
    goUserHome (uuid) {
      this.$router.push({ path: '/home/userHome', query: { uuid: uuid } })
    }

  },

  unmounted () {
    window.removeEventListener('scroll', this.windowScroll, true)// 销毁滚动事件
    console.log('结束滚动')
  }
}
</script>

<style lang="scss" scoped>
// 引入基础配置
@use "@/styles/init" as h;
.history {
  width: 100%;
  height: auto;
  min-height: 600px;
  position: relative;
  .history-header {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    display: flex;
    background: white;
    padding: 6px 0;
    border-bottom: 1px solid rgb(241, 241, 241);
    justify-content: space-between;
    border-radius: 5px;
    .left {
      color: #666;
      span {
        cursor: pointer;
        padding: 0 5px;
        width: 70px;
        display: inline-block;
        padding: 0 5px;
        text-align: center;
        .active-p {
          font-weight: 700;
          color: #f60;
        }
        p {
          transition: all 0.1s;
          &:hover {
            color: #f60;
            border-radius: 15px;
            background: rgba(255, 102, 0, 0.2);
          }
        }
      }
      .active {
        color: #f60;
        font-weight: 700;
      }
    }
    .right {
      width: 210px;
      background: rgb(245, 245, 245);
      border-radius: 15px;
      height: 30px;
      overflow: hidden;
      margin-right: 15px;
      .serach {
        .input-info {
          padding-left: 10px;
          input {
            height: 30px;
            border: none;
            outline: none;
            display: inline-block;
            background: rgb(245, 245, 245);
            outline-style: none;
            margin: 0 !important;
          }
          span {
            margin-left: 5px;
            font-size: 18px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .myfollow-user {
    width: 100%;
    // min-height: 70px;
    // background: #fff;

    .myfollow-useritems {
        width: 100%;
        min-height: 70px;
        background: #fff;
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &:hover {
          background: #eee;
        }

        .myfollow-userurl {
          text-decoration: none;
          color: #333;
          display: flex;
          align-items: center;
          margin-left: 20px;

          .myfollow-userimg {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            background: #666;
            cursor: pointer;
            img {
              z-index: 1;
              width: 100%;
              &:hover{
                filter: brightness(70%);
              }
            }
          }
          .myfollow-userinfo {
            font-size: 12px;
            line-height: 16px;
            margin-left: 10px;
            .userinfo-one {
              cursor: pointer;
              font-weight: bold;
              display: flex;
              align-items: center;
            }
            .userinfo-two {
              color: #666;
              p {
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
            .userinfo-three {
              color: #666;
            }
          }
        }
        .myfollow-button {
          // width: 70px;
          // height: 30px;
          // border-radius: 50px;
          // border: 1px solid #000;
          margin-right: 40px;
          display: flex;
          align-items: center;
          position: relative;
          .other {
            margin-left: 15px;
            cursor: pointer;
          }
          .other-more {
            position: absolute;
            top: 20px;
            left: -50%;
            width: 80px;
            min-height: 40px;
            background: #fff;
            box-shadow: 2px 2px 5px rgb(224 224 224),
              -2px -2px 5px rgb(224 224 224);
            border-radius: 5px;
            .info-box {
              padding: 5px 0;
              .close {
                display: flex;
                justify-content: flex-end;
                font-size: 12px;
                padding-right: 5px;
                i{
                  cursor: pointer;
                }
              }
              .more-list {
                width: 100%;
                .more-item {
                  cursor: pointer;
                  text-align: center;
                  font-size: 12px;
                  padding: 5px 0;
                  &:hover {
                    background: h.$background-color;
                  }
                }
              }
            }
          }

        }
      }
  }
    @media screen and (max-width:540px) {
  .history-header {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    display: flex;
    background: white;
    padding: 6px 0;
    border-bottom: 1px solid rgb(241, 241, 241);
    justify-content: space-between;
    border-radius: 5px;
    .left {
      color: #666;
      span {
        cursor: pointer;
        padding: 0 5px;
        width: 1.4rem;
        display: inline-block;
        padding: 0 5px;
        text-align: center;
        .active-p {
          font-weight: 700;
          color: #f60;
          font-size: .3rem;
        }
        p {
          transition: all 0.1s;
          font-size: .3rem;
          &:hover {
            color: #f60;
            border-radius: 15px;

          }
        }
      }
      .active {
        color: #f60;
        font-weight: 700;
      }
    }
    .right {
      width: 210px;
      background: rgb(245, 245, 245);
      border-radius: 15px;
      height: 30px;
      overflow: hidden;
      margin-right: 15px;
      .serach {
        .input-info {
          padding-left: 10px;
          input {
            height: 30px;
            border: none;
            outline: none;
            display: inline-block;
            background: rgb(245, 245, 245);
            outline-style: none;
            margin: 0 !important;
          }
          span {
            margin-left: 5px;
            font-size: 0.33rem;
            cursor: pointer;
          }
        }
      }
    }
  }
  .myfollow-user {
    width: 100%;
    // min-height: 70px;
    // background: #fff;

    .myfollow-useritems {
        width: 100%;
        min-height: 70px;
        background: #fff;
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &:hover {
          background: #eee;
        }

        .myfollow-userurl {
          text-decoration: none;
          color: #333;
          display: flex;
          align-items: center;
          margin-left: 20px;

          .myfollow-userimg {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            background: #666;
            cursor: pointer;
            img {
              z-index: 1;
              width: 100%;
              &:hover{
                filter: brightness(70%);
              }
            }
          }
          .myfollow-userinfo {
            font-size: 12px;
            line-height: 16px;
            margin-left: 10px;
            .userinfo-one {
              cursor: pointer;
              font-weight: bold;
              display: flex;
              align-items: center;
            }
            .userinfo-two {
              color: #666;
              p {
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
            .userinfo-three {
              color: #666;
            }
          }
        }
        .myfollow-button {
          // width: 70px;
          // height: 30px;
          // border-radius: 50px;
          // border: 1px solid #000;
          margin-right: 40px;
          display: flex;
          align-items: center;
          position: relative;
          .other {
            margin-left: 15px;
            cursor: pointer;
          }
          .other-more {
            position: absolute;
            top: 20px;
            left: -50%;
            width: 80px;
            min-height: 40px;
            background: #fff;
            box-shadow: 2px 2px 5px rgb(224 224 224),
              -2px -2px 5px rgb(224 224 224);
            border-radius: 5px;
            .info-box {
              padding: 5px 0;
              .close {
                display: flex;
                justify-content: flex-end;
                font-size: 12px;
                padding-right: 5px;
                i{
                  cursor: pointer;
                }
              }
              .more-list {
                width: 100%;
                .more-item {
                  cursor: pointer;
                  text-align: center;
                  font-size: 12px;
                  padding: 5px 0;
                  &:hover {
                    background: h.$background-color;
                  }
                }
              }
            }
          }

        }
      }
  }
}
}
</style>
